import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import screen from '../../../../common/screen'
import { Title, Description, Price, SaleNum, Earn } from '../../../../widget/Text'
import LinearGradient from 'react-native-linear-gradient'
import { BoxShadow } from 'react-native-shadow'
type Props = {
    info: Object,//商品信息
    OnPress: Function,//点击商品事件
}

class HotProductItem extends PureComponent<{}>{
    render() {
        let info = this.props.info
        return (
            //  onPress={()=>this.props.OnPressItem(info.id)}
            <BoxShadow setting={shadow}>
                <TouchableOpacity style={styles.contain} onPress={() => this.props.OnPress(info.id)}>
                    {/*商品图片*/}
                    <View style={styles.imageView}>
                        <Image style={styles.newImage} source={require('../../../../img/home/hot.png')} />
                        <View flex={1} />
                        <Image style={styles.image} resizeMode='contain' source={{ uri: info.imageUrl, cache: 'force-cache' }} />
                    </View>
                    {/*商品信息*/}
                    <View style={styles.textView}>
                        <Title numberOfLines={1}>{info.title}</Title>
                        <Description>{info.description}</Description>
                        <View flex={1} />
                        <View flexDirection={'row'} marginTop={20}>
                            <Image style={styles.memberPrice} resizeMode='contain' source={require('../../../../img/home/member_price.png')} />
                            <Price>¥{info.price}</Price>
                        </View>
                    </View>
                </TouchableOpacity>
            </BoxShadow>
        );
    }
}

//  {/*已买和收益*/}
//  <View flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-start'}>
//  <SaleNum>{info.buyNum}人已买</SaleNum>
//  <Earn>赚{info.earn}</Earn>
// </View>

const shadow = {
    width: (screen.width - 18) / 2,
    height: (screen.width - 18) / 2,
    color: "#000",
    border: 1,
    radius: 6,
    opacity: 0.25,
    x: 1,
    y: 2,
    style: { marginBottom: 4, }
}
const styles = StyleSheet.create({
    //最外面的布局
    contain: {
        width: (screen.width - 18) / 2,
        height: (screen.width - 18) / 2,
        borderRadius: 6,
        backgroundColor: "#FFFFFF",
    },
    //包含图片框
    imageView: {
        flexDirection: 'row',
    },
    //图片本身
    image: {
        width: screen.width * 0.194,
        height: screen.width * 0.194,
        marginTop: screen.width * 0.033,
        marginRight: screen.width * 0.033,
    },
    textView: {
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        padding: screen.width * 0.033,
    },
    memberPrice: {
        width: screen.width * 0.12,
        height: screen.width * 0.048,
        marginRight: 5,
    },
    newImage: {
        width: 30,
        height: 30,
        // marginTop:2,
        marginLeft: 14,
    }

})
export default HotProductItem